<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 5.4.0">


  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">



<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/all.min.css" integrity="sha256-mUZM63G8m73Mcidfrv5E+Y61y7a12O5mW4ezU3bxqW4=" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.1.1/animate.min.css" integrity="sha256-PR7ttpcvz8qrF57fur/yAx1qXMFJeJFiA6pSzWi0OIE=" crossorigin="anonymous">

<script class="next-config" data-name="main" type="application/json">{"hostname":"tallgy.gitee.io","root":"/","images":"/images","scheme":"Muse","darkmode":false,"version":"8.8.0","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12},"copycode":false,"bookmark":{"enable":false,"color":"#222","save":"auto"},"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"stickytabs":false,"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"fadeInDown","post_body":"fadeInDown","coll_header":"fadeInLeft","sidebar":"fadeInUp"}},"prism":false,"i18n":{"placeholder":"搜索...","empty":"没有找到任何搜索结果：${query}","hits_time":"找到 ${hits} 个搜索结果（用时 ${time} 毫秒）","hits":"找到 ${hits} 个搜索结果"}}</script><script src="/js/config.js"></script>
<meta name="description" content="只是一个知识的搬运工">
<meta property="og:type" content="website">
<meta property="og:title" content="tallgy&#39;s blog">
<meta property="og:url" content="http://tallgy.gitee.io/page/6/index.html">
<meta property="og:site_name" content="tallgy&#39;s blog">
<meta property="og:description" content="只是一个知识的搬运工">
<meta property="og:locale" content="zh_CN">
<meta property="article:author" content="tallgy">
<meta name="twitter:card" content="summary">


<link rel="canonical" href="http://tallgy.gitee.io/page/6/">



<script class="next-config" data-name="page" type="application/json">{"sidebar":"","isHome":true,"isPost":false,"lang":"zh-CN","comments":"","permalink":"","path":"page/6/index.html","title":""}</script>

<script class="next-config" data-name="calendar" type="application/json">""</script>
<title>tallgy's blog</title>
  




  <noscript>
    <link rel="stylesheet" href="/css/noscript.css">
  </noscript>
</head>

<body itemscope itemtype="http://schema.org/WebPage" class="use-motion">
  <div class="headband"></div>

  <main class="main">
    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏" role="button">
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <i class="logo-line"></i>
      <h1 class="site-title">tallgy's blog</h1>
      <i class="logo-line"></i>
    </a>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
    </div>
  </div>
</div>







</div>
        
  
  <div class="toggle sidebar-toggle" role="button">
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
  </div>

  <aside class="sidebar">

    <div class="sidebar-inner sidebar-overview-active">
      <ul class="sidebar-nav">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <div class="sidebar-panel-container">
        <!--noindex-->
        <div class="post-toc-wrap sidebar-panel">
        </div>
        <!--/noindex-->

        <div class="site-overview-wrap sidebar-panel">
          <div class="site-author site-overview-item animated" itemprop="author" itemscope itemtype="http://schema.org/Person">
  <p class="site-author-name" itemprop="name">tallgy</p>
  <div class="site-description" itemprop="description">只是一个知识的搬运工</div>
</div>
<div class="site-state-wrap site-overview-item animated">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
        <a href="/archives/">
          <span class="site-state-item-count">107</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
          <a href="/categories/">
        <span class="site-state-item-count">32</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
      <div class="site-state-item site-state-tags">
          <a href="/tags/">
        <span class="site-state-item-count">74</span>
        <span class="site-state-item-name">标签</span></a>
      </div>
  </nav>
</div>



        </div>
      </div>
    </div>
  </aside>
  <div class="sidebar-dimmer"></div>


    </header>

    
  <div class="back-to-top" role="button" aria-label="返回顶部">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>

<noscript>
  <div class="noscript-warning">Theme NexT works best with JavaScript enabled</div>
</noscript>


    <div class="main-inner index posts-expand">

    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="http://tallgy.gitee.io/2021/11/17/%E6%B5%8F%E8%A7%88%E5%99%A8/%E6%B5%8F%E8%A7%88%E5%99%A8%E7%9A%84%E5%9B%9E%E6%B5%81%E5%92%8C%E9%87%8D%E7%BB%98/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="tallgy">
      <meta itemprop="description" content="只是一个知识的搬运工">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="tallgy's blog">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2021/11/17/%E6%B5%8F%E8%A7%88%E5%99%A8/%E6%B5%8F%E8%A7%88%E5%99%A8%E7%9A%84%E5%9B%9E%E6%B5%81%E5%92%8C%E9%87%8D%E7%BB%98/" class="post-title-link" itemprop="url">浏览器的回流和重绘</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2021-11-17 10:11:43" itemprop="dateCreated datePublished" datetime="2021-11-17T10:11:43+08:00">2021-11-17</time>
    </span>
      <span class="post-meta-item">
        <span class="post-meta-item-icon">
          <i class="far fa-calendar-check"></i>
        </span>
        <span class="post-meta-item-text">更新于</span>
        <time title="修改时间：2023-06-25 16:57:29" itemprop="dateModified" datetime="2023-06-25T16:57:29+08:00">2023-06-25</time>
      </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">分类于</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/%E9%9A%8F%E7%AC%94/" itemprop="url" rel="index"><span itemprop="name">随笔</span></a>
        </span>
    </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <h1 id="浏览器的回流和重绘"><a href="#浏览器的回流和重绘" class="headerlink" title="浏览器的回流和重绘"></a>浏览器的回流和重绘</h1><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">https://juejin.cn/post/6844903753783443463</span><br></pre></td></tr></table></figure>

<p>先放一张图</p>
<p>![painted and re-render](浏览器的回流和重绘/painted and re-render.jpg)</p>
<h2 id="浏览器解析DOM树的过程"><a href="#浏览器解析DOM树的过程" class="headerlink" title="浏览器解析DOM树的过程"></a>浏览器解析DOM树的过程</h2><p>  DOM 树其实就是，浏览器用来描述节点信息的数据类型。</p>
<ul>
<li><p>当浏览器获取到html文件时，开始解析和构造DOM树，我们也知道html文件里面有 JavaScript、 CSS 和 其他文件</p>
<ul>
<li><p>遇到了 JavaScript，代码或者文件，在默认情况下，会停止DOM树的执行。因为 JavaScript 可以操作 DOM 。当然也有 defer 和 async 两个模式 </p>
<ul>
<li><pre><code>&lt;script defer async&gt;&lt;/script&gt;

当然这里 defer 和 async 的区别我们后续在讲解。
</code></pre>
</li>
<li><p>但是如果JavaScript操作了CSS，那么就会转而构造CSSOM树。</p>
</li>
</ul>
</li>
<li><p>遇到了CSS 和 其他文件，会先进行下载，CSS 会在DOM树的构造完成之后再进行构造。</p>
</li>
</ul>
</li>
<li><p>此时，html已经解析完成，DOM树 和 CSSOM 树也已经构造完成，我们就需要将DOM树和CSSOM树进行渲染为 render tree 或者叫做 layout tree，设置了display:none 的不会出现在渲染树上，但是对于before伪元素，就会出现在渲染树上。</p>
</li>
<li><p>生成了渲染树之后，便是进行绘制painting了。</p>
</li>
<li><p>painting之后便可以进行显示</p>
</li>
</ul>
<h2 id="重绘"><a href="#重绘" class="headerlink" title="重绘"></a>重绘</h2><p>我们可以知道页面的显示是要先进行渲染树的生成和painting，</p>
<p>而painting就是绘制，重绘就是指渲染树不会重新生成，但是需要重新绘制的情况。</p>
<p>常见的重绘就是颜色的变化，因为他不会引起布局的改变。</p>
<h2 id="重排-回流"><a href="#重排-回流" class="headerlink" title="重排 / 回流"></a>重排 / 回流</h2><p>重排就是渲染树重新进行了改变，一般来说就是导致了布局的变化就会导致重排。</p>
<p>重排会引起重绘。但是重绘不一定会引起重排</p>
<p>现在的浏览器也对频繁的重排重绘进行过优化，比如会有维护重排和重绘的队列，只有在达到阈值或者一定时间之后才会进行统一的调用，这样可以减少变化。</p>
<p>当然如果你使用了 clientWidth 这种属性，这一系列属性可以获取到标签的位置信息等的，浏览器会为了拿到一个最精准的属性会强制清空队列。</p>
<h2 id="如何减少重排"><a href="#如何减少重排" class="headerlink" title="如何减少重排"></a>如何减少重排</h2><p>减少的形式有很多：</p>
<ul>
<li>减少对渲染树的操作，比如可以将多次的操作合并为一个：<ul>
<li>使用CSS的类进行操作。</li>
<li>使用display:none 进行操作，因为这样在不显示的情况下是不会引起重排的，然后再操作完之后再显示，那么就只会造成两次重排。</li>
<li>使用 documentFragment，将操作放入这里，然后最后再添加到文档中</li>
</ul>
</li>
<li>减少使用属性，利用缓存，减少对属性的请求</li>
<li>尽量从末端修改元素</li>
<li>可以使用 绝对定位和固定定位，使其脱离文档流</li>
<li>使用transform属性代替其他操作。</li>
</ul>
<h2 id="transform属性为什么不会引起重排"><a href="#transform属性为什么不会引起重排" class="headerlink" title="transform属性为什么不会引起重排"></a>transform属性为什么不会引起重排</h2><p>这里简单来说，就是说浏览器在进行渲染的时候，是将其分成了多个图层，使用的复合图层的形式进行的操作。</p>
<p>当我们调用 transform的时候，会生成一个渲染层，对于这个渲染层会有独立的合成层。因此对其进行修改并不会影响到页面整体的渲染树的重新生成。</p>
<p>就是说，浏览器是将页面分成了不同的图层，然后根据不同的图层进行了划分。然后在显示的时候再根据z-index这种类型的进行一个高低的合成。</p>
<p><strong>独立的合成层如何产生</strong>：</p>
<ul>
<li>使用了 3D 或者 perspective transform</li>
<li>video</li>
<li>canvas</li>
<li>flash</li>
<li>opacity</li>
<li>CSS滤镜 filters</li>
<li>存在合成层后代的</li>
<li>和合成层重叠且在该层上面渲染的。</li>
</ul>

      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="http://tallgy.gitee.io/2021/11/16/Vue/Vue%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="tallgy">
      <meta itemprop="description" content="只是一个知识的搬运工">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="tallgy's blog">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2021/11/16/Vue/Vue%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F/" class="post-title-link" itemprop="url">Vue生命周期</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2021-11-16 22:15:21" itemprop="dateCreated datePublished" datetime="2021-11-16T22:15:21+08:00">2021-11-16</time>
    </span>
      <span class="post-meta-item">
        <span class="post-meta-item-icon">
          <i class="far fa-calendar-check"></i>
        </span>
        <span class="post-meta-item-text">更新于</span>
        <time title="修改时间：2023-06-25 16:57:29" itemprop="dateModified" datetime="2023-06-25T16:57:29+08:00">2023-06-25</time>
      </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">分类于</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/Vue/" itemprop="url" rel="index"><span itemprop="name">Vue</span></a>
        </span>
          ，
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/Vue/%E9%9A%8F%E7%AC%94/" itemprop="url" rel="index"><span itemprop="name">随笔</span></a>
        </span>
    </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <h1 id="Vue生命周期"><a href="#Vue生命周期" class="headerlink" title="Vue生命周期"></a>Vue生命周期</h1><p>先来一个直译的形式</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"> 创建一个Vue实例 new Vue</span><br><span class="line"> 初始化事件和生命周期</span><br><span class="line"> 调用 beforeCreate钩子</span><br><span class="line"> 初始化注入和反应</span><br><span class="line"> 调用 created 钩子</span><br><span class="line"> 编译模板阶段</span><br><span class="line">	Has el option 这里是判断是否使用了 el这个属性。如果没有使用那么就是属于未挂载的状态，只有在之后 $mount 被调用时才会进行下一步的编译。</span><br><span class="line">	Has template option，判断是否使用了template参数。如果没有使用template参数，那么就将用el元素时的内部标签，如果使用了template元素，那么就会将template的字符串作为标签覆盖el元素内部的，除非有插槽。</span><br><span class="line">	这里的 outerHTML，我们也知道就是：除了包含innerHTML的全部内容外, 还包含对象标签本身。</span><br><span class="line">然后就是调用 beforeMount 钩子</span><br><span class="line">然后就是创建 虚拟DOM 并且替换 el，这里就是实现了将页面的显示。此时这里在显示的时候就已经创建好了虚拟DOM并且还进行了数据和视图的绑定。</span><br><span class="line">调用 mounted 钩子，但是记住，这里这个钩子并不会保正所有的子组件都被挂载完成，虽然大部分情况都是的。当然可以使用 nexttick 这个函数来保证了所有的组件被渲染。</span><br><span class="line">现在已经装载完成，处于组件在视图中的情况。此时当数据发生改变会引起 beforeupdate钩子</span><br><span class="line">beforeUpdate钩子函数，在数据发生改变的时候，进行虚拟dom的渲染和patch之前。</span><br><span class="line">updated钩子函数，在渲染和patch之后。但是不会保证所有的子组件都刷新。</span><br><span class="line">当调用了 destroy方法，触发了 beforeDestroy钩子</span><br><span class="line">拆卸 watchers，子组件和事件监听</span><br><span class="line">已经被销毁了，调用destroyed</span><br></pre></td></tr></table></figure>

<img src="/.io//lifecycle.png" alt="lifecycle" style="zoom:67%;">

<p>简单就是分为了三大阶段。</p>
<p><strong>初始化，数据响应式，销毁。</strong></p>
<img src="/.io//lifecycle9.jpg" alt="lifecycle9" style="zoom:67%;">



<h1 id="分析每一阶段"><a href="#分析每一阶段" class="headerlink" title="分析每一阶段"></a>分析每一阶段</h1><h2 id="beforeCreate"><a href="#beforeCreate" class="headerlink" title="beforeCreate"></a>beforeCreate</h2><p>​        实例初始化之后，进行数据监听和事件/侦听器的配置之前</p>
<p>​        此时实例已经初始化了，就是有了this的指向，但是还没有开启数据监听和事件的配置。</p>
<p>​        但是没有data属性</p>
<h2 id="created"><a href="#created" class="headerlink" title="created"></a>created</h2><p>​        此时代表已经创建完成，已经将data对象创建好了，那么也代表了已经创建了响应的准备。</p>
<p>​        但是还没有开始编译模板。</p>
<h2 id="beforeMount"><a href="#beforeMount" class="headerlink" title="beforeMount"></a>beforeMount</h2><p>​        此时是创建了虚拟DOM进行了存储，对于存在了el参数的将会即时编译，不存在el参数的将会等待被调用时(vm.$mount(el))，再进行编译。</p>
<p>​        在编译完成之后便会调用beforeMount，此时就是处于编译完成，但是却没有进行页面渲染。</p>
<p>​        在挂载开始之前被调用：相关的 <code>render</code> 函数首次被调用。</p>
<p>​        此时我们可以发现，虽然我们使用 this.$el 会有输出，但是里面的 括号表达式还没有被转换为data的数据。</p>
<p>​        就是属于创建了一个虚拟的节点但是还没有进行处理。</p>
<h2 id="mounted"><a href="#mounted" class="headerlink" title="mounted"></a>mounted</h2><p>​        el 被新创建的 $el 替换了。此时模板已经渲染到了浏览器，</p>
<p>​        但是注意并不会保证所有的子组件也已经被挂载完成。</p>
<h2 id="beforeUpdate"><a href="#beforeUpdate" class="headerlink" title="beforeUpdate"></a>beforeUpdate</h2><p>​        此时是数据已经发生了改变，但是还没有更新DOM时被调用。</p>
<p>​        这里我们可以了解以下Vue的一个更新形式，在被修改了DOM时，是先进行虚拟DOM的修改，然后直到一个执行的结束，然后再进行渲染。这里的一个是指的是一个任务的执行结束加上微任务的结束。而宏任务会被记录为下一个nexttick</p>
<p>​        我们也可以简单的使用代码进行测试</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">new Promise(((resolve, reject) =&gt; &#123;</span><br><span class="line">  this.a = 10;</span><br><span class="line">  resolve(20);</span><br><span class="line">&#125;)).then(res =&gt; &#123;</span><br><span class="line">  this.a = res;</span><br><span class="line">&#125;)</span><br><span class="line">setTimeout(() =&gt; &#123;</span><br><span class="line">  this.a = 30;</span><br><span class="line">&#125;, 0);</span><br><span class="line"></span><br><span class="line">先使用promise，promise内部是一个同步，直到一个异步的开始，便下一个。</span><br><span class="line">then方法会被加入微任务</span><br><span class="line">settimeout方法会被加入宏任务。</span><br><span class="line">所以最后使用</span><br><span class="line">beforeUpdate() &#123;</span><br><span class="line">	// console.log(this.a);</span><br><span class="line">  this.$nextTick(() =&gt; &#123;</span><br><span class="line">    console.log(this.a);</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;</span><br><span class="line">输出时，nexttick会等待一个任务加上微任务的结束为标识进行执行。所以先直接输出两次 20</span><br><span class="line">然后再输出一次 30</span><br><span class="line">这里为什么会输出两次20，原因是beforeUpdate执行了两次，所以就运行了两次。</span><br></pre></td></tr></table></figure>



<h2 id="updated"><a href="#updated" class="headerlink" title="updated"></a>updated</h2><p>​        此时，组件的DOM已经更新。可以使用一些依赖DOM的操作，但是不会保证子组件的渲染完成。</p>
<h2 id="beforeDestroy"><a href="#beforeDestroy" class="headerlink" title="beforeDestroy"></a>beforeDestroy</h2><p>​        在实例被销毁之前被调用，此时所有的实例任然完全可以使用。</p>
<h2 id="destroyed"><a href="#destroyed" class="headerlink" title="destroyed"></a>destroyed</h2><p>​        实例销毁之后调用，此时所有的实例已经被解绑，监听已经被移除。所有的子实例也被销毁。</p>

      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="http://tallgy.gitee.io/2021/11/14/JavaScript/%E9%9A%8F%E7%AC%94/%E8%BF%AD%E4%BB%A3%E5%99%A8/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="tallgy">
      <meta itemprop="description" content="只是一个知识的搬运工">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="tallgy's blog">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2021/11/14/JavaScript/%E9%9A%8F%E7%AC%94/%E8%BF%AD%E4%BB%A3%E5%99%A8/" class="post-title-link" itemprop="url">迭代器</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2021-11-14 18:30:37" itemprop="dateCreated datePublished" datetime="2021-11-14T18:30:37+08:00">2021-11-14</time>
    </span>
      <span class="post-meta-item">
        <span class="post-meta-item-icon">
          <i class="far fa-calendar-check"></i>
        </span>
        <span class="post-meta-item-text">更新于</span>
        <time title="修改时间：2023-06-25 16:57:29" itemprop="dateModified" datetime="2023-06-25T16:57:29+08:00">2023-06-25</time>
      </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">分类于</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/JavaScript/" itemprop="url" rel="index"><span itemprop="name">JavaScript</span></a>
        </span>
          ，
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/JavaScript/%E6%A6%82%E5%BF%B5/" itemprop="url" rel="index"><span itemprop="name">概念</span></a>
        </span>
    </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <h1 id="JavaScript-迭代器"><a href="#JavaScript-迭代器" class="headerlink" title="JavaScript 迭代器"></a>JavaScript 迭代器</h1><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Iterators_and_Generators</span><br></pre></td></tr></table></figure>



<p>​        首先JavaScript里面的数组我们可以知道其实也是一个对象。但是为什么我们可以通过一些方法进行循环，这里就运用到了一个迭代器的方法。iterator</p>
<h2 id="可迭代协议"><a href="#可迭代协议" class="headerlink" title="可迭代协议"></a>可迭代协议</h2><p>​        <strong>可迭代协议</strong>允许 JavaScript 对象定义或定制它们的迭代行为，例如，在一个 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/for...of"><code>for..of</code></a> 结构中，哪些值可以被遍历到。一些内置类型同时是<a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Iteration_protocols#%E5%86%85%E7%BD%AE%E5%8F%AF%E8%BF%AD%E4%BB%A3%E5%AF%B9%E8%B1%A1">内置可迭代对象</a>，并且有默认的迭代行为，比如 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array"><code>Array</code></a> 或者 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Map"><code>Map</code></a>，而其他内置类型则不是（比如 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>Object</code></a>)）。</p>
<p>​        要成为<strong>可迭代</strong>对象， 一个对象必须实现 <code>**@@iterator**</code> 方法。这意味着对象（或者它<a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">原型链</a>上的某个对象）必须有一个键为 <code>@@iterator</code> 的属性，可通过常量 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Symbol/iterator"><code>Symbol.iterator</code></a> 访问该属性</p>
<p>​        简单来说就是forof进行循环的操作，会先调用一个 <code>@@iterator</code> 方法，然后使用这个方法返回的迭代器获得迭代的值。</p>
<p>​        通过这里我们就可以知道几个问题</p>
<ul>
<li>默认对象为什么不可以进行迭代，是因为对于默认是没有实现这个迭代器的。而Array和Map是默认就存在一个迭代器。</li>
<li>为什么对于数组存在empty-items，但是 forof 和 forin 为什么会不同的效果呢。就是因为forof是使用的迭代器的形式进行迭代，而forin是使用的键值对的形式进行的迭代。所以对于存在空值的数组，但是forof是通过数组的迭代器，所以还是使用的长度，而forin是使用的键值对，所以对于空值，实际上并没有迭代出来。</li>
</ul>
<h3 id="可迭代对象"><a href="#可迭代对象" class="headerlink" title="可迭代对象"></a>可迭代对象</h3><p>​        要成为<strong>可迭代</strong>对象， 一个对象必须实现 <code>**@@iterator**</code> 方法。这意味着对象（或者它<a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">原型链</a>上的某个对象）必须有一个键为 <code>@@iterator</code> 的属性，可通过常量 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Symbol/iterator"><code>Symbol.iterator</code></a> 访问该属性。</p>
<table>
<thead>
<tr>
<th align="left">属性</th>
<th align="left">值</th>
</tr>
</thead>
<tbody><tr>
<td align="left"><code>[Symbol.iterator]</code></td>
<td align="left">一个无参数的函数，其返回值为一个符合<a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Iteration_protocols#%E8%BF%AD%E4%BB%A3%E5%99%A8%E5%8D%8F%E8%AE%AE">迭代器协议</a>的对象。</td>
</tr>
</tbody></table>
<p>​        此函数可以是普通函数，也可以是生成器函数，以便在调用时返回迭代器对象。 在此生成器函数的内部，可以使用<code>yield</code>提供每个条目。</p>
<h2 id="迭代器协议"><a href="#迭代器协议" class="headerlink" title="迭代器协议"></a>迭代器协议</h2><p>​        <strong>迭代器协议</strong>定义了产生一系列值（无论是有限个还是无限个）的标准方式。当值为有限个时，所有的值都被迭代完毕后，则会返回一个默认返回值。</p>
<p>​        只有实现了一个拥有以下语义（semantic）的 <code>**next()**</code> 方法，一个对象才能成为迭代器：</p>
<table>
<thead>
<tr>
<th align="left">属性</th>
<th align="left">值</th>
</tr>
</thead>
<tbody><tr>
<td align="left"><code>next</code></td>
<td align="left">一个无参数或者一个参数的函数，返回一个应当拥有以下两个属性的对象：<code>done</code>（boolean）如果迭代器可以产生序列中的下一个值，则为 <code>false</code>。（这等价于没有指定 <code>done</code> 这个属性。）如果迭代器已将序列迭代完毕，则为 <code>true</code>。这种情况下，<code>value</code> 是可选的，如果它依然存在，即为迭代结束之后的默认返回值。<code>value</code>迭代器返回的任何 JavaScript 值。done 为 true 时可省略。<code>next()</code> 方法必须返回一个对象，该对象应当有两个属性： <code>done</code> 和 <code>value</code>，如果返回了一个非对象值（比如 <code>false</code> 或 <code>undefined</code>），则会抛出一个 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/TypeError"><code>TypeError</code></a> 异常（<code>&quot;iterator.next() returned a non-object value&quot;</code>）。</td>
</tr>
</tbody></table>
<p>​        查看一个内置的可迭代对象</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">let someString = &quot;hi&quot;;</span><br><span class="line">typeof someString[Symbol.iterator];          // &quot;function&quot;</span><br><span class="line"></span><br><span class="line">let iterator = someString[Symbol.iterator]();</span><br><span class="line">iterator + &quot;&quot;;                   // &quot;[object String Iterator]&quot;</span><br><span class="line"></span><br><span class="line">iterator.next();                         // &#123; value: &quot;h&quot;, done: false &#125;</span><br><span class="line">iterator.next();                         // &#123; value: &quot;i&quot;, done: false &#125;</span><br><span class="line">iterator.next();                 // &#123; value: undefined, done: true &#125;</span><br></pre></td></tr></table></figure>



<p>​        自己提供一个@@iterator 方法，方法需要能够使用next方法。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">// 必须构造 String 对象以避免字符串字面量 auto-boxing</span><br><span class="line">var someString = new String(&quot;hi&quot;);</span><br><span class="line">someString[Symbol.iterator] = function() &#123;</span><br><span class="line">  return &#123; // 只返回一次元素，字符串 &quot;bye&quot;，的迭代器对象</span><br><span class="line">    next: function() &#123;	</span><br><span class="line">      if (this._first) &#123;</span><br><span class="line">        this._first = false;</span><br><span class="line">        return &#123; value: &quot;bye&quot;, done: false &#125;;</span><br><span class="line">      &#125; else &#123;</span><br><span class="line">        return &#123; done: true &#125;;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    _first: true</span><br><span class="line">  &#125;;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<p>​        通过*<strong>生成器函数*</strong> 也可以生成这个效果。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">var myIterable = &#123;&#125;;</span><br><span class="line">myIterable[Symbol.iterator] = function* () &#123;</span><br><span class="line">    yield 1;</span><br><span class="line">    yield 2;</span><br><span class="line">    yield 3;</span><br><span class="line">&#125;;</span><br><span class="line">[...myIterable]; // [1, 2, 3]</span><br></pre></td></tr></table></figure>



<p>​        一个简单的示例。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br></pre></td><td class="code"><pre><span class="line">let o = &#123;</span><br><span class="line">  a: 1,</span><br><span class="line">  b: 2,</span><br><span class="line">  x: 3</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">这个是使用的生成器语法进行的操作。</span><br><span class="line">个人建议使用生成器函数进行操作，生成器的语法非常合适这个迭代器。如果不使用生成器的语法，会比较复杂。</span><br><span class="line">o[Symbol.iterator] = function* () &#123;</span><br><span class="line">  let keys = Object.keys(this);</span><br><span class="line">  for (const keysKey in keys) &#123;</span><br><span class="line">    yield this[keys[keysKey]];</span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line">这里是一个没有使用生成器的语法，所以对于返回值，需要有一个next函数进行调用。然后，调用之后会返回一个值，然后如何解决是否返回结束，行为就是一个index进行存储，但是如果先进行了index的修改，那么return的时候也要进行一次修改，所以会比较麻烦。</span><br><span class="line">o[Symbol.iterator] = function () &#123;</span><br><span class="line">  let keys = Object.keys(this);</span><br><span class="line">  let obj = this;</span><br><span class="line"></span><br><span class="line">  return &#123;</span><br><span class="line">    next: function () &#123;</span><br><span class="line">      if (keys[this.index]) &#123;</span><br><span class="line">        //最终方式</span><br><span class="line">        return &#123; value: obj[keys[this.index++]], done: false &#125;;</span><br><span class="line">        </span><br><span class="line">        //++this.index;</span><br><span class="line">        //return &#123; value: obj[keys[this.index-1]], done: false &#125;;</span><br><span class="line">        </span><br><span class="line">        //	</span><br><span class="line">        //return &#123; value: obj[keys[this.index]], done: false &#125;;</span><br><span class="line">        </span><br><span class="line">        //	通过这里我们也 知道了，++会先于 &amp;&amp;||逻辑运算符。</span><br><span class="line">        //return this.index++ || console.log(this.index) &amp;&amp; &#123; value: obj[keys[this.index]], done: false &#125;;</span><br><span class="line">      &#125; else &#123;</span><br><span class="line">        return &#123; done: true &#125;;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    index: 0</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>​        通过这个方法可以取出迭代器对象并且使用next()获取下一个迭代的值。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">let oo = o[Symbol.iterator]();</span><br><span class="line">console.log(oo.next());</span><br></pre></td></tr></table></figure>



<p>生成器对象既是一个迭代器，也是一个可迭代的对象。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line">let generator = function* ()&#123;</span><br><span class="line">  yield 1;</span><br><span class="line">  yield 2;</span><br><span class="line">  yield 3;</span><br><span class="line">&#125;();</span><br><span class="line"></span><br><span class="line">console.log(typeof generator.next);</span><br><span class="line">// 返回&quot;function&quot;, 因为有一个next方法，所以这是一个迭代器</span><br><span class="line">迭代器就是存在了next方法的一个对象，next方法的返回值为value和done</span><br><span class="line"></span><br><span class="line">console.log(typeof generator[Symbol.iterator]);</span><br><span class="line">// 返回&quot;function&quot;, 因为有一个@@iterator方法，所以这是一个可迭代对象</span><br><span class="line">可迭代对象，意思就是说这个是可以使用迭代器的，可以使用forof方法。简单来说就是这个方法内部实现了 [Symbol.iterator] 函数。</span><br><span class="line"></span><br><span class="line">console.log(generator[Symbol.iterator]() === generator);</span><br><span class="line">// 返回true, 因为@@iterator方法返回自身（即迭代器），所以这是一个格式良好的可迭代对象</span><br><span class="line">首先，我们知道这是一个可迭代对象，也是一个迭代器，意思就是说，这个迭代器的内部也存在一个迭代器。一个是它本身的任务就是一个迭代器，另一个是它作为一个可迭代对象，它存在一个内部的迭代器，然后这里的意思就是说可迭代对象的迭代器方法和它自身是相等的。</span><br><span class="line">感觉就像是一个普通函数返回的对象里面有一个next方法和一个[Symbol.iterator]方法，然后这个Symbol.iterator方法是直接返回自身。所以就是迭代器的迭代器方法返回为自身。</span><br><span class="line"></span><br><span class="line">console.log([...generator]);</span><br><span class="line">// 返回[1, 2, 3]</span><br><span class="line"></span><br><span class="line">console.log(Symbol.iterator in generator)</span><br><span class="line">// 返回true, 因为@@iterator方法是generator的一个属性</span><br></pre></td></tr></table></figure>

<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br></pre></td><td class="code"><pre><span class="line">let o = &#123;</span><br><span class="line">  a: 1,</span><br><span class="line">  b: 2,</span><br><span class="line">  x: 3</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">// o[Symbol.iterator] = function* () &#123;</span><br><span class="line">//   let keys = Object.keys(this);</span><br><span class="line">//</span><br><span class="line">//   for (const keysKey in keys) &#123;</span><br><span class="line">//     yield this[keys[keysKey]];</span><br><span class="line">//   &#125;</span><br><span class="line">// &#125;;</span><br><span class="line"></span><br><span class="line">o[Symbol.iterator] = function () &#123;</span><br><span class="line">  let keys = Object.keys(this);</span><br><span class="line">  let obj = this;</span><br><span class="line">  return &#123;</span><br><span class="line">    next: function () &#123;</span><br><span class="line">      if (keys[this.index]) &#123;</span><br><span class="line">        return &#123; value: obj[keys[this.index++]], done: false &#125;;</span><br><span class="line">      &#125; else &#123;</span><br><span class="line">        return &#123; done: true &#125;;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    [Symbol.iterator]: function () &#123;</span><br><span class="line">      return this;</span><br><span class="line">    &#125;,</span><br><span class="line">    index: 0</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">let generator = function* ()&#123;</span><br><span class="line">  yield 1;</span><br><span class="line">  yield 2;</span><br><span class="line">  yield 3;</span><br><span class="line">&#125;();</span><br><span class="line"></span><br><span class="line">console.log(typeof generator.next);</span><br><span class="line"></span><br><span class="line">let g = o[Symbol.iterator]();</span><br><span class="line">console.log(typeof g.next);</span><br><span class="line">// 返回&quot;function&quot;, 因为有一个next方法，所以这是一个迭代器</span><br><span class="line"></span><br><span class="line">console.log(typeof generator[Symbol.iterator]);</span><br><span class="line">console.log(typeof g[Symbol.iterator])</span><br><span class="line">// 返回&quot;function&quot;, 因为有一个@@iterator方法，所以这是一个可迭代对象</span><br><span class="line"></span><br><span class="line">console.log(generator[Symbol.iterator]() === generator);</span><br><span class="line">console.log(g[Symbol.iterator]() === g);</span><br><span class="line">// 返回true, 因为@@iterator方法返回自身（即迭代器），所以这是一个格式良好的可迭代对象</span><br><span class="line"></span><br><span class="line">console.log([...generator]);</span><br><span class="line">// 返回[1, 2, 3]</span><br><span class="line"></span><br><span class="line">console.log(Symbol.iterator in generator)</span><br><span class="line">console.log(Symbol.iterator in g)</span><br><span class="line">// 返回true, 因为@@iterator方法是generator的一个属性</span><br></pre></td></tr></table></figure>


      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="http://tallgy.gitee.io/2021/11/14/JavaScript/%E6%96%B9%E6%B3%95/%E6%95%B0%E7%BB%84%E7%9A%84%E6%96%B9%E6%B3%95/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="tallgy">
      <meta itemprop="description" content="只是一个知识的搬运工">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="tallgy's blog">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2021/11/14/JavaScript/%E6%96%B9%E6%B3%95/%E6%95%B0%E7%BB%84%E7%9A%84%E6%96%B9%E6%B3%95/" class="post-title-link" itemprop="url">数组的方法</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2021-11-14 10:04:13" itemprop="dateCreated datePublished" datetime="2021-11-14T10:04:13+08:00">2021-11-14</time>
    </span>
      <span class="post-meta-item">
        <span class="post-meta-item-icon">
          <i class="far fa-calendar-check"></i>
        </span>
        <span class="post-meta-item-text">更新于</span>
        <time title="修改时间：2023-06-25 16:57:29" itemprop="dateModified" datetime="2023-06-25T16:57:29+08:00">2023-06-25</time>
      </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">分类于</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/JavaScript/" itemprop="url" rel="index"><span itemprop="name">JavaScript</span></a>
        </span>
          ，
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/JavaScript/Array/" itemprop="url" rel="index"><span itemprop="name">Array</span></a>
        </span>
    </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <h1 id="数组的方法"><a href="#数组的方法" class="headerlink" title="数组的方法"></a>数组的方法</h1><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array</span><br></pre></td></tr></table></figure>



<h2 id="静态方法"><a href="#静态方法" class="headerlink" title="静态方法"></a>静态方法</h2><h3 id="from"><a href="#from" class="headerlink" title="from"></a>from</h3><p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/from"><code>Array.from()</code></a></p>
<p>​        从类数组对象或者可迭代对象中创建一个新的数组实例</p>
<p>​        就是生成一个数组</p>
<h3 id="isArray"><a href="#isArray" class="headerlink" title="isArray"></a>isArray</h3><p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray"><code>Array.isArray()</code></a></p>
<p>​        用来判断某个变量是否是一个数组对象</p>
<h3 id="of"><a href="#of" class="headerlink" title="of"></a>of</h3><p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/of"><code>Array.of()</code></a></p>
<p>​    根据一组参数来创建新的数组实例，支持任意的参数数量和类型</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">Array.of(1, 4)</span><br><span class="line">[1, 4]</span><br></pre></td></tr></table></figure>



<h2 id="实例方法"><a href="#实例方法" class="headerlink" title="实例方法"></a>实例方法</h2><h3 id="concat"><a href="#concat" class="headerlink" title="concat"></a>concat</h3><p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/concat"><code>Array.prototype.concat()</code></a></p>
<p>​        用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">a.concat(b)</span><br><span class="line">也可以使用下面这个方式进行合并。</span><br><span class="line">[...a, ...b]</span><br></pre></td></tr></table></figure>



<h3 id="copyWithin"><a href="#copyWithin" class="headerlink" title="copyWithin"></a>copyWithin</h3><p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/copyWithin"><code>Array.prototype.copyWithin()</code></a></p>
<p>​        浅复制数组的一部分到同一数组中的另一个位置，并返回它，不会改变原数组的长度</p>
<p>​        注意，这个是浅复制。</p>
<h3 id="entries"><a href="#entries" class="headerlink" title="entries"></a>entries</h3><p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/entries"><code>Array.prototype.entries()</code></a></p>
<p>​        返回一个新的 <code>Array Iterator</code> 对象，该对象包含数组中每个索引的键/值对</p>
<p>​        Iterator 是一个迭代器，有的循环需要使用迭代器进行循环。</p>
<h3 id="every"><a href="#every" class="headerlink" title="every"></a>every</h3><p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/every"><code>Array.prototype.every()</code></a></p>
<p>​        测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值</p>
<p>​        every里面有两个参数，一个是回调函数，一个是this的指向。</p>
<p>​        every里面是一个回调函数，然后回调函数的参数分别为 值，下标和原数组本身，然后会执行里面的方法，进行Boolean进行判断是否为true，只有所有的数组都为true才为true。</p>
<p>​        这里，为什么我会认为是使用的Boolean()来对返回值进行的判断呢。因为如果你 return []; 发现是true，但是如果你对 []==true 发现是false，所以他是使用的Boolean进行的判断。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">console.log(a.every((value, index, arr) =&gt; &#123;</span><br><span class="line">  return value == index;</span><br><span class="line">&#125;))</span><br></pre></td></tr></table></figure>

<p>​        简易实现：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">Array.prototype.every = function (callback, thisArg) &#123;</span><br><span class="line">  let arr = this;</span><br><span class="line">  thisArg = thisArg || this;</span><br><span class="line">  for (const key in arr) &#123;</span><br><span class="line">    if (!Boolean(callback.call(thisArg, arr[key], key, arr))) &#123;</span><br><span class="line">      return false;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  return true;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<h3 id="fill"><a href="#fill" class="headerlink" title="fill"></a>fill</h3><p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/fill"><code>Array.prototype.fill()</code></a></p>
<p>​        用一个固定值填充一个数组中从起始索引到终止索引内的全部元素</p>
<p>​        有三个参数，第一个是必须的。三个参数分别是：填充值value，起始索引start，终止索引end。</p>
<h3 id="filter"><a href="#filter" class="headerlink" title="filter"></a>filter</h3><p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/filter"><code>Array.prototype.filter()</code></a></p>
<p>​        创建一个新数组, 其包含通过所提供函数实现的测试的所有元素</p>
<p>​        里面的参数也是一样，一个回调和一个this指向。</p>
<p>​        使用方式和上面的every一样，这个回调函数的作用是将返回true的加入一个数组，最后再将这个数组返回，常用于过滤条件。</p>
<h3 id="find"><a href="#find" class="headerlink" title="find"></a>find</h3><p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/find"><code>Array.prototype.find()</code></a></p>
<p>​        返回数组中满足提供的测试函数的第一个元素的值。否则返回 <code>undefined</code></p>
<p>​        参数还是一样，一个回调一个this指向</p>
<p>​        会将第一个满足的尽心返回便结束，并不会返回一个数组，只是返回单个元素。 或者 undefined</p>
<h3 id="findIndex"><a href="#findIndex" class="headerlink" title="findIndex"></a>findIndex</h3><p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex"><code>Array.prototype.findIndex()</code></a></p>
<p>​        返回数组中满足提供的测试函数的第一个元素的<strong>索引</strong>。若没有找到对应元素则返回 <code>-1</code></p>
<p>​        同上 callback，thisArg</p>
<p>​        效果：返回通过的第一个的索引，或者 -1</p>
<h3 id="flat"><a href="#flat" class="headerlink" title="flat"></a>flat</h3><p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/flat"><code>Array.prototype.flat()</code></a></p>
<p>​        按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回</p>
<p>​        常用于数组的扁平化操作，参数是递归的深度。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">let a = [1, 5, 2, [1], [[[[[[[[[2, 3]]]]]]]]]];</span><br><span class="line">console.log(a.flat(Infinity))</span><br><span class="line"></span><br><span class="line">[ 1, 5, 2, 1, 2, 3 ]</span><br></pre></td></tr></table></figure>



<h3 id="flatMap"><a href="#flatMap" class="headerlink" title="flatMap"></a>flatMap</h3><p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/flatMap"><code>Array.prototype.flatMap()</code></a></p>
<p>​        使用映射函数映射每个元素，然后将结果压缩成一个新数组</p>
<p>​        简单来说，就是先使用map生成一系列新的数组，然后再使用flat进行扁平化操作，记住是1层的扁平化。</p>
<h3 id="forEach"><a href="#forEach" class="headerlink" title="forEach"></a>forEach</h3><p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach"><code>Array.prototype.forEach()</code></a></p>
<p>​        对数组的每个元素执行一次给定的函数</p>
<p>​        分别是回调函数和一个this指向。会对每个参数都执行一次里面的方法，没有返回值。</p>
<h3 id="includes"><a href="#includes" class="headerlink" title="includes"></a>includes</h3><p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/includes"><code>Array.prototype.includes()</code></a></p>
<p>​        判断一个数组是否包含一个指定的值，如果包含则返回 <code>true</code>，否则返回 <code>false</code></p>
<p>​        第一个是指定值，第二个是可选参数index</p>
<h3 id="indexOf"><a href="#indexOf" class="headerlink" title="indexOf"></a>indexOf</h3><p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf"><code>Array.prototype.indexOf()</code></a></p>
<p>​        返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回 <code>-1</code></p>
<p>​        第一个是要查找的参数，第一个是从index值开始查找。包含index值</p>
<h3 id="join"><a href="#join" class="headerlink" title="join"></a>join</h3><p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/join"><code>Array.prototype.join()</code></a></p>
<p>​        将一个数组的所有元素连接成一个字符串并返回这个字符串</p>
<p>​        参数是一个分隔符。默认是 ，</p>
<h3 id="keys"><a href="#keys" class="headerlink" title="keys"></a>keys</h3><p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/keys"><code>Array.prototype.keys()</code></a></p>
<p>​        返回一个包含数组中每个索引键的 <code>Array Iterator</code> 对象</p>
<h3 id="lastIndexOf"><a href="#lastIndexOf" class="headerlink" title="lastIndexOf"></a>lastIndexOf</h3><p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf"><code>Array.prototype.lastIndexOf()</code></a></p>
<p>​        返回指定元素在数组中的最后一个的索引，如果不存在则返回 <code>-1</code></p>
<p>​        第一个是要查找的元素，第二个是从此位置开始逆向查找。默认为数组的长度减 1(<code>arr.length - 1</code>)，即整个数组都被查找。如果该值大于或等于数组的长度，则整个数组会被查找。如果为负值，将其视为从数组末尾向前的偏移（-1就是最后一个位置。）。即使该值为负，数组仍然会被从后向前查找。如果该值为负时，其绝对值大于数组长度，则方法返回 -1，即数组不会被查找。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">let a = [0, 1, 2];</span><br><span class="line">console.log(a.lastIndexOf(0, 0))	//0</span><br><span class="line">console.log(a.lastIndexOf(2, -1))	//2</span><br></pre></td></tr></table></figure>



<h3 id="map"><a href="#map" class="headerlink" title="map"></a>map</h3><p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/map"><code>Array.prototype.map()</code></a></p>
<p>​        返回一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值</p>
<p>​        第一个是回调函数，第二个是this指向。返回的是调用回调函数之后返回的结果组成的数组。</p>
<h3 id="pop"><a href="#pop" class="headerlink" title="pop"></a>pop</h3><p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/pop"><code>Array.prototype.pop()</code></a></p>
<p>​        从数组中删除最后一个元素，并返回该元素的值</p>
<p>​        是通过的length属性进行的操作，所以如果是在类数组上进行操作，没有length或者length不能转成数字则为0，并返回undefined。</p>
<h3 id="push"><a href="#push" class="headerlink" title="push"></a>push</h3><p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/push"><code>Array.prototype.push()</code></a></p>
<p>​        将一个或多个元素添加到数组的末尾，并返回该数组的新长度</p>
<p>​        同上，使用的length。</p>
<h3 id="reduce"><a href="#reduce" class="headerlink" title="reduce"></a>reduce</h3><p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce"><code>Array.prototype.reduce()</code></a></p>
<p>​        对数组中的每个元素执行一个由您提供的reducer函数（升序执行），将其结果汇总为单个返回值</p>
<p>​        回调函数和一个初始值的参数，回调函数的参数分别为：累计值，当前值，下标和数组</p>
<p>​        行为简单来说就是，如果有初始值则取初始值，如果没有初始值那么便为0，这个初始值会作为回调函数的第一个参数，然后再调用数组进行循环，然后将值返回，用于下一次回调函数的初始值，常用于累加操作。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">let a = [1, 2, 3];</span><br><span class="line">a.reduce((total, cur) =&gt; &#123;</span><br><span class="line">	return total + cur;</span><br><span class="line">&#125;, 0);</span><br><span class="line">//6</span><br></pre></td></tr></table></figure>

<p>​        回调函数第一次执行时，<code>accumulator</code> 和<code>currentValue</code>的取值有两种情况：如果调用<code>reduce()</code>时提供了<code>initialValue</code>，<code>accumulator</code>取值为<code>initialValue</code>，<code>currentValue</code>取数组中的第一个值；如果没有提供 <code>initialValue</code>，那么<code>accumulator</code>取数组中的第一个值，<code>currentValue</code>取数组中的第二个值。</p>
<h3 id="reduceRight"><a href="#reduceRight" class="headerlink" title="reduceRight"></a>reduceRight</h3><p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/ReduceRight"><code>Array.prototype.reduceRight()</code></a></p>
<p>​        接受一个函数作为累加器（accumulator）和数组的每个值（从右到左）将其减少为单个值</p>
<p>​        和reduce差不多，就是这个是从右向左进行的操作。</p>
<h3 id="reverse"><a href="#reverse" class="headerlink" title="reverse"></a>reverse</h3><p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse"><code>Array.prototype.reverse()</code></a></p>
<p>​        将数组中元素的位置颠倒，并返回该数组。该方法会改变原数组</p>
<h3 id="shift"><a href="#shift" class="headerlink" title="shift"></a>shift</h3><p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/shift"><code>Array.prototype.shift()</code></a></p>
<p>​        从数组中删除第一个元素，并返回该元素的值</p>
<h3 id="slice"><a href="#slice" class="headerlink" title="slice"></a>slice</h3><p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/slice"><code>Array.prototype.slice()</code></a></p>
<p>​        提取源数组的一部分并返回一个新数组</p>
<p>​        第一个参数，起始值，默认0。第二个参数结束值。</p>
<p>​        不包含结束值，但是包含起始值</p>
<h3 id="come"><a href="#come" class="headerlink" title="come"></a>come</h3><p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/some"><code>Array.prototype.some()</code></a></p>
<p>​        测试数组中是不是至少有一个元素通过了被提供的函数测试</p>
<p>​        同every，但是一个通过即可。</p>
<h3 id="sort"><a href="#sort" class="headerlink" title="sort"></a>sort</h3><p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/sort"><code>Array.prototype.sort()</code></a></p>
<p>​        对数组元素进行原地排序并返回此数组</p>
<p>​        默认是使用的字符串进行的排序，所以需要自己定义一个排序的形式。</p>
<p>​        参数可选，是一个回调函数<strong>compareFunction</strong>，代表了用于比较的元素。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">compareFunction(a, b) 小于0， 那么a会排到b之前。</span><br><span class="line">compareFunction(a, b) 等于0， 那么a和b的位置不会发生改变。</span><br><span class="line">compareFunction(a, b) 大于0， 那么b会排到a之前。</span><br></pre></td></tr></table></figure>



<h3 id="splice"><a href="#splice" class="headerlink" title="splice"></a>splice</h3><p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/splice"><code>Array.prototype.splice()</code></a></p>
<p>​        通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容</p>
<p>​        参数：startIndex，开始的位置， deleteCount，要删除的个数，默认后面全部删除， item1，item2，要添加的元素。默认不添加。</p>
<h3 id="toLocaleString-NaN"><a href="#toLocaleString-NaN" class="headerlink" title="toLocaleString"></a>toLocaleString</h3><p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/toLocaleString"><code>Array.prototype.toLocaleString()</code></a></p>
<p>​        返回一个字符串表示数组中的元素。数组中的元素将使用各自的 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/toLocaleString"><code>Object.prototype.toLocaleString()</code></a> 方法转成字符串</p>
<p>​        这个我没有看懂，好像是将数组的内容，按照区域或者类型的规则转换成特殊的字符串。</p>
<p>​        不会修改原数组。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">var prices = [&#x27;￥7&#x27;, 500, 8123, 12];</span><br><span class="line">prices.toLocaleString(&#x27;ja-JP&#x27;, &#123; style: &#x27;currency&#x27;, currency: &#x27;JPY&#x27; &#125;);</span><br><span class="line"></span><br><span class="line">// &quot;￥7,￥500,￥8,123,￥12&quot;</span><br></pre></td></tr></table></figure>



<h3 id="toString-NaN"><a href="#toString-NaN" class="headerlink" title="toString"></a>toString</h3><p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/toString"><code>Array.prototype.toString()</code></a></p>
<p>​        返回一个字符串表示指定的数组及其元素。数组中的元素将使用各自的 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/toString"><code>Object.prototype.toString()</code></a> 方法转成字符串</p>
<p>​        toString方法，没啥可说的。</p>
<h3 id="unshift"><a href="#unshift" class="headerlink" title="unshift"></a>unshift</h3><p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift"><code>Array.prototype.unshift()</code></a></p>
<p>​        将一个或多个元素添加到数组的头部，并返回该数组的新长度</p>
<p>下面这两个和迭代器相关，现在我没有学迭代器，代我们迭代器学了之后再进行了解。</p>
<h3 id="values"><a href="#values" class="headerlink" title="values"></a>values</h3><p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/values"><code>Array.prototype.values()</code></a></p>
<p>​        返回一个新的 <code>Array Iterator 对象</code>，该对象包含数组每个索引的值</p>
<p>​        返回的是一个迭代器的对象，iterator，使用forof进行循环可以取出值。</p>
<h3 id="iterator"><a href="#iterator" class="headerlink" title="iterator"></a>iterator</h3><p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/@@iterator"><code>Array.prototype[@@iterator]()</code></a></p>
<p>​        返回一个新的 <code>Array Iterator 对象</code>，该对象包含数组每个索引的值</p>
<p>​        </p>

      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="http://tallgy.gitee.io/2021/11/13/CSS/CSS%E4%BC%AA%E7%B1%BB%E5%92%8C%E4%BC%AA%E5%85%83%E7%B4%A0/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="tallgy">
      <meta itemprop="description" content="只是一个知识的搬运工">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="tallgy's blog">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2021/11/13/CSS/CSS%E4%BC%AA%E7%B1%BB%E5%92%8C%E4%BC%AA%E5%85%83%E7%B4%A0/" class="post-title-link" itemprop="url">CSS伪类和伪元素</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2021-11-13 23:08:34" itemprop="dateCreated datePublished" datetime="2021-11-13T23:08:34+08:00">2021-11-13</time>
    </span>
      <span class="post-meta-item">
        <span class="post-meta-item-icon">
          <i class="far fa-calendar-check"></i>
        </span>
        <span class="post-meta-item-text">更新于</span>
        <time title="修改时间：2023-06-25 16:57:29" itemprop="dateModified" datetime="2023-06-25T16:57:29+08:00">2023-06-25</time>
      </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">分类于</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/CSS/" itemprop="url" rel="index"><span itemprop="name">CSS</span></a>
        </span>
          ，
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/CSS/%E9%9A%8F%E7%AC%94/" itemprop="url" rel="index"><span itemprop="name">随笔</span></a>
        </span>
    </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <h1 id="CSS伪类和伪元素"><a href="#CSS伪类和伪元素" class="headerlink" title="CSS伪类和伪元素"></a>CSS伪类和伪元素</h1><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements</span><br></pre></td></tr></table></figure>



<h2 id="伪类"><a href="#伪类" class="headerlink" title="伪类"></a>伪类</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-classes</span><br></pre></td></tr></table></figure>

<p>​        伪类是选择器的一种，它用于选择处于特定状态的元素，比如当它们是这一类型的第一个元素时，或者是当鼠标指针悬浮在元素上面的时候。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">使用的是单冒号</span><br><span class="line">:</span><br></pre></td></tr></table></figure>

<h3 id="行为伪类"><a href="#行为伪类" class="headerlink" title="行为伪类"></a>行为伪类</h3><p>​        一些伪类只会在用户以某种方式和文档交互的时候应用。这些<strong>用户行为伪类</strong>，有时叫做<strong>动态伪类</strong>，表现得就像是一个类在用户和元素交互的时候加到了元素上一样。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">:hover,:focus</span><br></pre></td></tr></table></figure>

<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">div:hover &#123;&#125;</span><br></pre></td></tr></table></figure>



<h2 id="伪元素"><a href="#伪元素" class="headerlink" title="伪元素"></a>伪元素</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-elements</span><br></pre></td></tr></table></figure>

<p>​        伪元素以类似方式表现，不过表现得是像你往标记文本中加入全新的HTML元素一样，而不是向现有的元素上应用类。伪元素开头为双冒号<code>::</code>。</p>
<blockquote>
<p><strong>备注：</strong>一些早期的伪元素曾使用单冒号的语法，所以你可能会在代码或者示例中看到。现代的浏览器为了保持后向兼容，支持早期的带有单双冒号语法的伪元素。</p>
</blockquote>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">::before</span><br><span class="line">::after</span><br></pre></td></tr></table></figure>

<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">//before和after的伪元素 content是必须的。</span><br><span class="line">div::before &#123;</span><br><span class="line">	content: &#x27;&#x27;;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<h1 id="区别"><a href="#区别" class="headerlink" title="区别"></a>区别</h1><ul>
<li><p>伪元素是生成一个新的，或者表现的像是生成了一个新的HTML元素。</p>
<p>伪类是选择处于某种状态的的元素。</p>
</li>
<li><p>伪元素是使用的 ::</p>
<p>伪类是使用的 :</p>
</li>
</ul>

      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="http://tallgy.gitee.io/2021/11/13/JavaScript/%E9%9A%8F%E7%AC%94/%E6%95%B0%E7%BB%84%E7%9A%84emptyItems/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="tallgy">
      <meta itemprop="description" content="只是一个知识的搬运工">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="tallgy's blog">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2021/11/13/JavaScript/%E9%9A%8F%E7%AC%94/%E6%95%B0%E7%BB%84%E7%9A%84emptyItems/" class="post-title-link" itemprop="url">数组的emptyItems</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2021-11-13 21:45:21" itemprop="dateCreated datePublished" datetime="2021-11-13T21:45:21+08:00">2021-11-13</time>
    </span>
      <span class="post-meta-item">
        <span class="post-meta-item-icon">
          <i class="far fa-calendar-check"></i>
        </span>
        <span class="post-meta-item-text">更新于</span>
        <time title="修改时间：2023-06-25 16:57:29" itemprop="dateModified" datetime="2023-06-25T16:57:29+08:00">2023-06-25</time>
      </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">分类于</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/JavaScript/" itemprop="url" rel="index"><span itemprop="name">JavaScript</span></a>
        </span>
          ，
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/JavaScript/%E9%9A%8F%E7%AC%94/" itemprop="url" rel="index"><span itemprop="name">随笔</span></a>
        </span>
    </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <h1 id="数组的empty-items"><a href="#数组的empty-items" class="headerlink" title="数组的empty-items"></a>数组的empty-items</h1><h2 id="empty的产生"><a href="#empty的产生" class="headerlink" title="empty的产生"></a>empty的产生</h2><p>​        首先，先说一下如何产生empty</p>
<ul>
<li>使用 new Array函数进行创建，并没有初始化</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">let a = new Array(10);</span><br><span class="line">console.log(a);</span><br></pre></td></tr></table></figure>

<ul>
<li>使用 length方法重新定义了长度，长度比原来的数组长，那么会导致多余的变为 empty-items。</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">let a = [1];</span><br><span class="line">a.length = 10;</span><br></pre></td></tr></table></figure>



<h2 id="empty的问题"><a href="#empty的问题" class="headerlink" title="empty的问题"></a>empty的问题</h2><p>​        开始我也没有在意这个empty的问题，但是后来发现对于empty-items 使用一些方法是不会进行循环的。这就造成了很大的问题。</p>
<ul>
<li>map等数组的高阶函数，</li>
<li>forin循环</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">let a = new Array(10);</span><br><span class="line"></span><br><span class="line">a.map((v) =&gt; &#123;</span><br><span class="line">  console.log(v);</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">for (const key in a) &#123;</span><br><span class="line">  console.log(a[key])</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>​        但是forof循环是可以的，fori循环也可以，输出的值就是undefined。</p>
<h2 id="原因"><a href="#原因" class="headerlink" title="原因"></a>原因</h2><p>当然具体的原因我也不知道，我们可以这样理解，JavaScript的数组也是一个特殊的对象形式，所以对于这些empty-items，其实并没有真正的存在，就类似于一种离散的数组形式，所以为什么循环不到，因为对于不存在的是无法循环的。但是为什么forof是可以循环的呢，我们也许可以这样思考，forof是使用的迭代器循环，所以并不是循环到了，只是这是一个数组的迭代器的形式，所以这样才成功的循环了。</p>

      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="http://tallgy.gitee.io/2021/11/13/JavaScript/%E9%9A%8F%E7%AC%94/%E9%AB%98%E9%98%B6%E5%87%BD%E6%95%B0/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="tallgy">
      <meta itemprop="description" content="只是一个知识的搬运工">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="tallgy's blog">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2021/11/13/JavaScript/%E9%9A%8F%E7%AC%94/%E9%AB%98%E9%98%B6%E5%87%BD%E6%95%B0/" class="post-title-link" itemprop="url">高阶函数</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2021-11-13 11:17:08" itemprop="dateCreated datePublished" datetime="2021-11-13T11:17:08+08:00">2021-11-13</time>
    </span>
      <span class="post-meta-item">
        <span class="post-meta-item-icon">
          <i class="far fa-calendar-check"></i>
        </span>
        <span class="post-meta-item-text">更新于</span>
        <time title="修改时间：2023-06-25 16:57:29" itemprop="dateModified" datetime="2023-06-25T16:57:29+08:00">2023-06-25</time>
      </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">分类于</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/JavaScript/" itemprop="url" rel="index"><span itemprop="name">JavaScript</span></a>
        </span>
          ，
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/JavaScript/%E9%9A%8F%E7%AC%94/" itemprop="url" rel="index"><span itemprop="name">随笔</span></a>
        </span>
    </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <h1 id="JavaScript-高阶函数"><a href="#JavaScript-高阶函数" class="headerlink" title="JavaScript 高阶函数"></a>JavaScript 高阶函数</h1><p>​        面试的时候我被问到了什么是高阶函数，当时就蒙了，现在去了解了一下。</p>
<p>​        其实这个东西很简单，你也经常使用。只是听起来高大上罢了</p>
<h2 id="函数是什么"><a href="#函数是什么" class="headerlink" title="函数是什么"></a>函数是什么</h2><p>​        说到高阶函数，我们需要知道函数的一些形式，我们也需要思考函数可以和变量一样进行传递吗</p>
<p>​        在JavaScript中，函数实际上也是一个对象。每一个函数都是Function类型的一个实例。它既有 __proto__，也有 prototype。但是prototype才是它自身的，而 proto 是它原型的一个指向。</p>
<h2 id="什么是高阶函数"><a href="#什么是高阶函数" class="headerlink" title="什么是高阶函数"></a>什么是高阶函数</h2><p>​        在这里我们知道了函数其实就是一个特殊的对象，所以其实可以进行传递，因此。</p>
<p>​        高阶函数由此而来，高阶函数就是进行了函数的传递，不是将函数当成一个函数，而是当成一个对象进行传递。</p>
<h2 id="常用的高阶函数的一些方法"><a href="#常用的高阶函数的一些方法" class="headerlink" title="常用的高阶函数的一些方法"></a>常用的高阶函数的一些方法</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">map， reduce， sort 等等。</span><br></pre></td></tr></table></figure>

<p>​        这里就不详细进行介绍。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">map(Number);</span><br><span class="line"></span><br><span class="line">map是一个会将一个数组的值调用回调函数生成的值作为一个新的数组</span><br><span class="line">Number就是转数字，</span><br><span class="line"></span><br><span class="line">所以这两个的结合就是，会将数组的值挨个使用一次Number方法，将生成的结果进行返回。</span><br></pre></td></tr></table></figure>


      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="http://tallgy.gitee.io/2021/11/12/JavaScript/%E9%9A%8F%E7%AC%94/%E5%87%BD%E6%95%B0%E6%9F%AF%E9%87%8C%E5%8C%96/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="tallgy">
      <meta itemprop="description" content="只是一个知识的搬运工">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="tallgy's blog">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2021/11/12/JavaScript/%E9%9A%8F%E7%AC%94/%E5%87%BD%E6%95%B0%E6%9F%AF%E9%87%8C%E5%8C%96/" class="post-title-link" itemprop="url">函数柯里化</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2021-11-12 16:57:59" itemprop="dateCreated datePublished" datetime="2021-11-12T16:57:59+08:00">2021-11-12</time>
    </span>
      <span class="post-meta-item">
        <span class="post-meta-item-icon">
          <i class="far fa-calendar-check"></i>
        </span>
        <span class="post-meta-item-text">更新于</span>
        <time title="修改时间：2023-06-25 16:57:29" itemprop="dateModified" datetime="2023-06-25T16:57:29+08:00">2023-06-25</time>
      </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">分类于</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/JavaScript/" itemprop="url" rel="index"><span itemprop="name">JavaScript</span></a>
        </span>
          ，
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/JavaScript/%E9%9A%8F%E7%AC%94/" itemprop="url" rel="index"><span itemprop="name">随笔</span></a>
        </span>
    </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <h1 id="JavaScript函数柯里化-Curry"><a href="#JavaScript函数柯里化-Curry" class="headerlink" title="JavaScript函数柯里化 Curry"></a>JavaScript函数柯里化 Curry</h1><p>​        就是说一次性只传入一个参数，后续的参数要后面才进行传递，可以实现函数的一个参数的复用效果。</p>
<h2 id="实现"><a href="#实现" class="headerlink" title="实现"></a>实现</h2><p>​        首先是要确认参数的个数，这里，我看到别人是使用的 fn.length，进行的获取，所以实验了一番，发现方法的length指的是参数的个数。</p>
<p>​        使用fn.length获取了方法的参数的个数，使用剩余参数将传递进来的参数存放入数组，然后再个数足够时运行方法即可。</p>
<p>​        一步一步的理解。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line">// ...args，剩余参数，将后面的参数都作为一个数组进行实现。剩余参数必须放最后一个。</span><br><span class="line">function curry(fn, ...args) &#123;</span><br><span class="line">	// 将this的指向存储下来，后续调用时会用。</span><br><span class="line">  let _this = this;</span><br><span class="line">  //	fn.length，这个方法可以获取到方法的参数个数。</span><br><span class="line">  let len = fn.length;</span><br><span class="line"></span><br><span class="line">	//	同样的，返回一个方法，然后使用剩余参数法则。</span><br><span class="line">  return function (..._args) &#123;</span><br><span class="line">    // let _args = Object.values(arguments);</span><br><span class="line">    //这里使用的是 unshift，没有使用push，是因为，为了避免修改了前面的args值，所以是修改的每一次的_args，如果使用push的话，你对这个函数重复调用也会被存储进去，因为这个是上层的参数，是公用的。</span><br><span class="line">    _args.unshift(...args);</span><br><span class="line">    // console.log(arguments.callee);	//获取被调用的函数，这里报错了，原因没有看，因为这个方式已经不建议使用了。</span><br><span class="line"></span><br><span class="line">		//	这里是当参数的个数不够时，继续调用这个外层方法。</span><br><span class="line">    if (_args.length &lt; len) &#123;</span><br><span class="line">    	//这里，只能重新调用外层的方法，如果调用内层的方法的话，参数会无法添加成功，因为内层方法的参数是基于外层的添加。</span><br><span class="line">      return curry.call(_this, fn, ..._args);</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">		//	参数够了，调用方法。</span><br><span class="line">    return fn.apply(_this, _args);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>


      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="http://tallgy.gitee.io/2021/11/12/JavaScript/ES6%E9%9A%8F%E7%AC%941/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="tallgy">
      <meta itemprop="description" content="只是一个知识的搬运工">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="tallgy's blog">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2021/11/12/JavaScript/ES6%E9%9A%8F%E7%AC%941/" class="post-title-link" itemprop="url">ES6随笔1</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2021-11-12 14:10:35" itemprop="dateCreated datePublished" datetime="2021-11-12T14:10:35+08:00">2021-11-12</time>
    </span>
      <span class="post-meta-item">
        <span class="post-meta-item-icon">
          <i class="far fa-calendar-check"></i>
        </span>
        <span class="post-meta-item-text">更新于</span>
        <time title="修改时间：2023-06-25 16:57:29" itemprop="dateModified" datetime="2023-06-25T16:57:29+08:00">2023-06-25</time>
      </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">分类于</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/JavaScript/" itemprop="url" rel="index"><span itemprop="name">JavaScript</span></a>
        </span>
          ，
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/JavaScript/%E9%9A%8F%E7%AC%94/" itemprop="url" rel="index"><span itemprop="name">随笔</span></a>
        </span>
    </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <h1 id="ES6-JS-一些新的API"><a href="#ES6-JS-一些新的API" class="headerlink" title="ES6-JS 一些新的API"></a>ES6-JS 一些新的API</h1><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">https://juejin.cn/post/7016520448204603423</span><br></pre></td></tr></table></figure>



<h2 id="数组合并并去重"><a href="#数组合并并去重" class="headerlink" title="数组合并并去重"></a>数组合并并去重</h2><p>​        先使用扩展运算符进行转化为一个数组，然后再使用set方式去重。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">let arr1 = [1, 3, 5];</span><br><span class="line">let arr2 = [1, 6, 12];</span><br><span class="line"></span><br><span class="line">let arr = [...new Set([...arr1, ...arr2])];</span><br><span class="line">console.log(arr);</span><br></pre></td></tr></table></figure>



<h2 id="对象合并"><a href="#对象合并" class="headerlink" title="对象合并"></a>对象合并</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">let obj = &#123;...obj1, ...obj2&#125;;</span><br></pre></td></tr></table></figure>



<h2 id="字符串拼接加判断"><a href="#字符串拼接加判断" class="headerlink" title="字符串拼接加判断"></a>字符串拼接加判断</h2><p>使用模板字符串，模板字符串内部的${}，可以放入任意的JavaScript表达式</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">const result = `$&#123;name&#125;$&#123;score &gt; 60 ? &#x27;的考试及格&#x27; : &#x27;的考试不及格&#x27;&#125;`;</span><br></pre></td></tr></table></figure>



<h2 id="使用-includes-进行或判断"><a href="#使用-includes-进行或判断" class="headerlink" title="使用 includes 进行或判断"></a>使用 includes 进行或判断</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">const arr = [1, 2, 3];</span><br><span class="line">if (arr.includes(type)) &#123;&#125;</span><br><span class="line"></span><br><span class="line">就等于了</span><br><span class="line">if (type === 1 || type===2 || type===3) &#123;&#125;</span><br></pre></td></tr></table></figure>



<h2 id="使用-find-和-filter-进行查找"><a href="#使用-find-和-filter-进行查找" class="headerlink" title="使用 find 和 filter 进行查找"></a>使用 find 和 filter 进行查找</h2><ul>
<li>find 的特点是只查找第一个满足的</li>
<li>filter是将所有满足的作为一个新的数组返回。</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">arr.filter(v =&gt; &#123;</span><br><span class="line">	return v === 3;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">arr.find(v =&gt; &#123;</span><br><span class="line">	return v === 3;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>



<h2 id="扁平化数组"><a href="#扁平化数组" class="headerlink" title="扁平化数组"></a>扁平化数组</h2><ul>
<li>Object.values，这个代表了取出对象的属性值，然后作为一个数组。</li>
<li>flat 是一个扁平化数组的方法，Infinity作用是将很多层扁平化为一层。具体的可以取MDN进行查看。</li>
<li>注意： <code>flat</code> 方法不支持IE浏览器</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">const deps = &#123;</span><br><span class="line">	key: [],</span><br><span class="line">	key1: []</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line">let member = Object.values(deps).flat(Infinity);</span><br></pre></td></tr></table></figure>



<h2 id="空值合并运算符"><a href="#空值合并运算符" class="headerlink" title="空值合并运算符 ??"></a>空值合并运算符 ??</h2><ul>
<li><code>??</code> 代表了如果 左侧的变量是 null或者是undefined时，那么将会返回右侧的操作数。</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">let a ?? &#x27;&#x27;</span><br></pre></td></tr></table></figure>



<h2 id="异步函数"><a href="#异步函数" class="headerlink" title="异步函数"></a>异步函数</h2><ul>
<li>就是Promise.all 和 Promise.race 的使用</li>
<li>以及可以使用 async 函数。</li>
<li>避免生成回调地狱。</li>
</ul>

      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="http://tallgy.gitee.io/2021/11/11/JavaScript/ES6/JavaScript-ES6%E8%A7%A3%E6%9E%84/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="tallgy">
      <meta itemprop="description" content="只是一个知识的搬运工">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="tallgy's blog">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2021/11/11/JavaScript/ES6/JavaScript-ES6%E8%A7%A3%E6%9E%84/" class="post-title-link" itemprop="url">JavaScript-ES6解构</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2021-11-11 22:14:32" itemprop="dateCreated datePublished" datetime="2021-11-11T22:14:32+08:00">2021-11-11</time>
    </span>
      <span class="post-meta-item">
        <span class="post-meta-item-icon">
          <i class="far fa-calendar-check"></i>
        </span>
        <span class="post-meta-item-text">更新于</span>
        <time title="修改时间：2023-06-25 16:57:29" itemprop="dateModified" datetime="2023-06-25T16:57:29+08:00">2023-06-25</time>
      </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">分类于</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/JavaScript/" itemprop="url" rel="index"><span itemprop="name">JavaScript</span></a>
        </span>
          ，
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/JavaScript/ES6/" itemprop="url" rel="index"><span itemprop="name">ES6</span></a>
        </span>
    </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <h1 id="JavaScript-解构赋值"><a href="#JavaScript-解构赋值" class="headerlink" title="JavaScript 解构赋值"></a>JavaScript 解构赋值</h1><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment</span><br></pre></td></tr></table></figure>



<p>​        <strong>解构赋值</strong>语法是一种 Javascript 表达式。通过<strong>解构赋值,</strong> 可以将属性/值从对象/数组中取出,赋值给其他变量。</p>
<p>​        简单来说，就是对于一个赋值变得简单起来。</p>
<h2 id="语法"><a href="#语法" class="headerlink" title="语法"></a>语法</h2><h3 id="a-b-arr"><a href="#a-b-arr" class="headerlink" title="[a, b] = arr;"></a>[a, b] = arr;</h3><ul>
<li>多余的不会被赋值</li>
<li>少的会变成undefined</li>
<li>注意要避免arr为null和undefined，对象同样，需要是数组和对象才行。</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">let arr = [1, 3, 5];</span><br><span class="line"></span><br><span class="line">let [a, b] = arr;</span><br><span class="line">console.log(a, b);</span><br><span class="line"></span><br><span class="line">1, 3</span><br></pre></td></tr></table></figure>



<h3 id="a-b-…rest-arr"><a href="#a-b-…rest-arr" class="headerlink" title="[a, b, …rest] = arr;"></a>[a, b, …rest] = arr;</h3><ul>
<li>这里，对于多余的都会变成第三个的数组</li>
<li>少于的，前面两个是undefined， 第三个数组会是一个空数组。</li>
<li>剩余元素必须在最后一个。</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">let arr = [1, 3, 4, 2, ];</span><br><span class="line"></span><br><span class="line">let [a, b, ...res] = arr;</span><br><span class="line">console.log(a, b, res);</span><br><span class="line"></span><br><span class="line">1 3 [ 4, 2 ]</span><br></pre></td></tr></table></figure>



<h3 id="a-b-obj"><a href="#a-b-obj" class="headerlink" title="({ a, b } = obj);"></a>({ a, b } = obj);</h3><ul>
<li><p>这个是以名称为主，需要找到obj内部的a，如果没有，那么就会变成undefined，其次，这里的值是可以是原型上的。 obj.__proto__ 只要原型链上存在也会赋值。</p>
</li>
<li><p>其次，这里需要添加括号，或者是定义时进行解构赋值，这里的作用可能是避免大括号的影响了编译的判断。</p>
</li>
<li><p><strong>注意</strong>：赋值语句周围的圆括号 <code>( ... )</code> 在使用对象字面量无声明解构赋值时是必须的。 <code>&#123;a, b&#125; = &#123;a: 1, b: 2&#125;</code> 不是有效的独立语法，因为左边的 <code>&#123;a, b&#125;</code> 被认为是一个块而不是对象字面量。</p>
</li>
<li><p>然而，<code>(&#123;a, b&#125; = &#123;a: 1, b: 2&#125;)</code> 是有效的，正如 <code>var &#123;a, b&#125; = &#123;a: 1, b: 2&#125;</code>你的 <code>( ... )</code> 表达式之前需要有一个分号，否则它可能会被当成上一行中的函数执行。</p>
</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">let obj = &#123;</span><br><span class="line">  a: 10,</span><br><span class="line">  b: 20,</span><br><span class="line">  c: 30</span><br><span class="line">&#125;;</span><br><span class="line">let a,c;</span><br><span class="line">(&#123;a, c&#125; = obj);</span><br><span class="line">console.log(a, c);</span><br><span class="line"></span><br><span class="line">10, 30</span><br></pre></td></tr></table></figure>

<p>​        or</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">let obj = &#123;</span><br><span class="line">  a: 10,</span><br><span class="line">  b: 20,</span><br><span class="line">  c: 30</span><br><span class="line">&#125;;</span><br><span class="line">let &#123;a, b&#125; = obj;</span><br><span class="line">console.log(a, b);</span><br><span class="line"></span><br><span class="line">10, 20</span><br></pre></td></tr></table></figure>



<h3 id="a-b-…rest-obj"><a href="#a-b-…rest-obj" class="headerlink" title="({a, b, …rest} = obj);"></a>({a, b, …rest} = obj);</h3><ul>
<li>这里是将前面没有进行赋值的对象全部加入了最后一个对象。</li>
<li>其次，最后一个是不会进入原型链进行查找赋值的。</li>
<li>如果没有了，那么便会变成空对象。</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">let obj = &#123;</span><br><span class="line">  a: 10,</span><br><span class="line">  b: 20,</span><br><span class="line">  c: 30</span><br><span class="line">&#125;;</span><br><span class="line">obj.__proto__ = &#123;</span><br><span class="line">  x: 1111,</span><br><span class="line">&#125;</span><br><span class="line">let &#123;a, ...res&#125; = obj;</span><br><span class="line">console.log(a, res);</span><br></pre></td></tr></table></figure>



<h3 id="a-4-a-10-解构默认值"><a href="#a-4-a-10-解构默认值" class="headerlink" title="[a=4] / {a = 10} 解构默认值"></a>[a=4] / {a = 10} 解构默认值</h3><ul>
<li>简单来说就是设置一个默认值，不会变成undefined</li>
<li>对于对象也有效果 </li>
<li>默认值可以是对象。</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">var a, b;</span><br><span class="line"></span><br><span class="line">[a=5, b=7] = [1];    //[a=5, b=7] = [1, undefined]; ,就算是这样也是 1， 7</span><br><span class="line">console.log(a); // 1</span><br><span class="line">console.log(b); // 7</span><br></pre></td></tr></table></figure>

<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">(&#123;a=5, b=7&#125; = &#123;</span><br><span class="line">  a: 3,</span><br><span class="line">&#125;);</span><br><span class="line">console.log(a); // 1</span><br><span class="line">console.log(b); // 7</span><br><span class="line"></span><br><span class="line">(&#123;a=5, b= &#123; x: 1 &#125;&#125; = &#123; a: 3 &#125;); 并且还能使用赋值默认对象效果。</span><br></pre></td></tr></table></figure>



<h3 id="a-b-b-a-交换变量"><a href="#a-b-b-a-交换变量" class="headerlink" title="[a, b] = [b, a]; 交换变量"></a>[a, b] = [b, a]; 交换变量</h3><ul>
<li>交换的变量可以是对象，也可以是值类型。</li>
<li>({a, b} = {b, a});  这个没有交换变量的效果。</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">let a= &#123;a: 4&#125;,</span><br><span class="line">    b= &#123;x:3&#125;;</span><br><span class="line">[a, b] = [b, a];</span><br><span class="line">console.log(a, b);</span><br></pre></td></tr></table></figure>



<h3 id="忽略值-a-b-arr"><a href="#忽略值-a-b-arr" class="headerlink" title="忽略值 [a, , b] = arr;"></a>忽略值 [a, , b] = arr;</h3><ul>
<li>可以对不要的值不使用变量进行存储，使用 <code>, ,</code> 这样就能达到忽略的效果</li>
<li>对象不能使用忽略值的效果，会报错，</li>
<li><code>[, ,] = arr</code> ， 这样可以忽略全部返回值</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">function f() &#123;</span><br><span class="line">  return [1, 2, 3];</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">var [a, , b] = f();</span><br><span class="line">console.log(a); // 1</span><br><span class="line">console.log(b); // 3</span><br></pre></td></tr></table></figure>



<h3 id="命名赋值-p-foo-obj-别名"><a href="#命名赋值-p-foo-obj-别名" class="headerlink" title="命名赋值 {p: foo} = obj; 别名"></a>命名赋值 {p: foo} = obj; 别名</h3><ul>
<li>只能用于对象</li>
<li>可以将其重新命名。</li>
<li>可以将命名赋值和默认值一同使用 {p:foo = 10}</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">var o = &#123;p: 42, q: true&#125;;</span><br><span class="line">var &#123;p: foo, q: bar&#125; = o;</span><br><span class="line"></span><br><span class="line">console.log(foo); // 42</span><br><span class="line">console.log(bar); // true </span><br></pre></td></tr></table></figure>



<h3 id="方法参数的赋值"><a href="#方法参数的赋值" class="headerlink" title="方法参数的赋值"></a>方法参数的赋值</h3><ul>
<li>首先，function fn(op = {}) {}</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">function drawES2015Chart(&#123;size = &#x27;big&#x27;, cords = &#123; x: 0, y: 0 &#125;, radius = 25&#125; = &#123;&#125;) &#123;&#125;</span><br><span class="line">上面这个写法很高级，但是有点难以理解。</span><br><span class="line"></span><br><span class="line">function fn(o = &#123;x: &#x27;x&#x27;, c: 1&#125;) &#123;&#125;</span><br><span class="line">这个写法，虽然可以理解了，但是如果传参时添加了一个参数便会全部覆盖，达不到想要的效果。</span><br><span class="line"></span><br><span class="line">function fn(o = &#123;&#125;) &#123;&#125;</span><br><span class="line">此时如果没有传入参数则会变成一个空对象，然后我们再将这个o换成一个对象</span><br><span class="line"></span><br><span class="line">function fn(&#123;x = 3&#125; = &#123;&#125;) &#123;&#125;</span><br><span class="line">此时，如果不传入参数，那么先是一个空对象，然后再将空对象赋值给了前面的，然后就会生成一个 x=3 的数了。</span><br><span class="line">如果传入的对象里面没有x，同样也是生成x=3的数。</span><br><span class="line">所以此时再去看最开始那个就应该能够看懂了</span><br><span class="line"></span><br><span class="line">function fn(&#123;x = 3&#125;) &#123;&#125;</span><br><span class="line">这里的区别，在于如果没有传入任何值，那么将会报错，而上面使用了空对象，可以不传递参数。</span><br></pre></td></tr></table></figure>

<blockquote>
<p>在上面的 <strong><code>drawES2015Chart</code></strong> 的函数签名中，解构的左手边被分配给右手边的空对象字面值：<code>&#123;size = &#39;big&#39;, cords = &#123;x: 0, y: 0&#125;, radius = 25&#125; = &#123;&#125;</code>。你也可以在没有右侧分配的情况下编写函数。但是，如果你忽略了右边的赋值，那么函数会在被调用的时候查找至少一个被提供的参数，而在当前的形式下，你可以直接调用 <code>**drawES2015Chart()**</code> 而不提供任何参数。如果你希望能够在不提供任何参数的情况下调用该函数，则当前的设计非常有用，而另一种方法在您确保将对象传递给函数时非常有用。</p>
</blockquote>
<h3 id="解构一个嵌套对象和数组"><a href="#解构一个嵌套对象和数组" class="headerlink" title="解构一个嵌套对象和数组"></a>解构一个嵌套对象和数组</h3><ul>
<li>没啥讲的，但是却有点东西，对象别名使用了 []， 进行了数组赋值，然后再在里面进行了对象赋值，{}</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line">const metadata = &#123;</span><br><span class="line">  title: &#x27;Scratchpad&#x27;,</span><br><span class="line">  translations: [</span><br><span class="line">    &#123;</span><br><span class="line">      locale: &#x27;de&#x27;,</span><br><span class="line">      localization_tags: [],</span><br><span class="line">      last_edit: &#x27;2014-04-14T08:43:37&#x27;,</span><br><span class="line">      url: &#x27;/de/docs/Tools/Scratchpad&#x27;,</span><br><span class="line">      title: &#x27;JavaScript-Umgebung&#x27;</span><br><span class="line">    &#125;</span><br><span class="line">  ],</span><br><span class="line">  url: &#x27;/en-US/docs/Tools/Scratchpad&#x27;</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line">let &#123;</span><br><span class="line">  title: englishTitle, // rename</span><br><span class="line">  translations: [</span><br><span class="line">    &#123;</span><br><span class="line">       title: localeTitle, // rename</span><br><span class="line">    &#125;,</span><br><span class="line">  ],</span><br><span class="line">&#125; = metadata;</span><br><span class="line"></span><br><span class="line">console.log(englishTitle); // &quot;Scratchpad&quot;</span><br><span class="line">console.log(localeTitle);  // &quot;JavaScript-Umgebung&quot;</span><br></pre></td></tr></table></figure>



<h3 id="for-of-迭代和解构"><a href="#for-of-迭代和解构" class="headerlink" title="for of 迭代和解构"></a>for of 迭代和解构</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line">var people = [</span><br><span class="line">  &#123;</span><br><span class="line">    name: &#x27;Mike Smith&#x27;,</span><br><span class="line">    family: &#123;</span><br><span class="line">      mother: &#x27;Jane Smith&#x27;,</span><br><span class="line">      father: &#x27;Harry Smith&#x27;,</span><br><span class="line">      sister: &#x27;Samantha Smith&#x27;</span><br><span class="line">    &#125;,</span><br><span class="line">    age: 35</span><br><span class="line">  &#125;,</span><br><span class="line">  &#123;</span><br><span class="line">    name: &#x27;Tom Jones&#x27;,</span><br><span class="line">    family: &#123;</span><br><span class="line">      mother: &#x27;Norah Jones&#x27;,</span><br><span class="line">      father: &#x27;Richard Jones&#x27;,</span><br><span class="line">      brother: &#x27;Howard Jones&#x27;</span><br><span class="line">    &#125;,</span><br><span class="line">    age: 25</span><br><span class="line">  &#125;</span><br><span class="line">];</span><br><span class="line"></span><br><span class="line">for (var &#123;name: n, family: &#123;father: f&#125;&#125; of people) &#123;</span><br><span class="line">  console.log(&#x27;Name: &#x27; + n + &#x27;, Father: &#x27; + f);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<h3 id="计算属性名，可以被解构"><a href="#计算属性名，可以被解构" class="headerlink" title="计算属性名，可以被解构"></a>计算属性名，可以被解构</h3><ul>
<li>简单来说，就是key变成了一个变量，然后使用[]， 来将一个常量换成了一个变量</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">let key = &quot;z&quot;;</span><br><span class="line">let &#123; [key]: foo &#125; = &#123; z: &quot;bar&quot; &#125;;</span><br><span class="line"></span><br><span class="line">console.log(foo); // &quot;bar&quot;</span><br></pre></td></tr></table></figure>



<h3 id="无效的标识符作为一个属性名"><a href="#无效的标识符作为一个属性名" class="headerlink" title="无效的标识符作为一个属性名"></a>无效的标识符作为一个属性名</h3><p>在这里，fizz-buzz 是一个无效的变量名，我们使用字符串形式，然后加上别名进行操作。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">const foo = &#123; &#x27;fizz-buzz&#x27;: true &#125;;</span><br><span class="line">const &#123; &#x27;fizz-buzz&#x27;: fizzBuzz &#125; = foo;</span><br><span class="line"></span><br><span class="line">console.log(fizzBuzz); // &quot;true&quot;</span><br></pre></td></tr></table></figure>


      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




  <nav class="pagination">
    <a class="extend prev" rel="prev" href="/page/5/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/5/">5</a><span class="page-number current">6</span><a class="page-number" href="/page/7/">7</a><span class="space">&hellip;</span><a class="page-number" href="/page/11/">11</a><a class="extend next" rel="next" href="/page/7/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
  </nav>

</div>
  </main>

  <footer class="footer">
    <div class="footer-inner">


<div class="copyright">
  &copy; 
  <span itemprop="copyrightYear">2023</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">tallgy</span>
</div>
  <div class="powered-by">由 <a href="https://hexo.io/" rel="noopener" target="_blank">Hexo</a> & <a href="https://theme-next.js.org/muse/" rel="noopener" target="_blank">NexT.Muse</a> 强力驱动
  </div>

    </div>
  </footer>

  
  <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js" integrity="sha256-XL2inqUJaslATFnHdJOi9GfQ60on8Wx1C2H8DYiN1xY=" crossorigin="anonymous"></script>
<script src="/js/comments.js"></script><script src="/js/utils.js"></script><script src="/js/motion.js"></script><script src="/js/schemes/muse.js"></script><script src="/js/next-boot.js"></script>

  





  





</body>
</html>
